<template>
  <!-- 物料-->
  <div>
   <!--  搜索筛选 -->
    <el-form :inline="true" :model="material" class="user-search">
      <el-form-item label="物料编号">
        <el-input size="small" v-model="material.materialNumber" clearable placeholder="输入物料编号"></el-input>
      </el-form-item>
      <el-form-item label="物料名称">
        <el-input size="small" v-model="material.materialName" clearable placeholder="输入物料名称"></el-input>
      </el-form-item>
      <el-form-item label="部门">
        <el-select size="small" v-model="material.id" placeholder="请选择物料供应商" clearable class="userRole">
          <el-option label="生产部" value="1"></el-option>
          <el-option label="质量部" value="2"></el-option>
          <el-option label="研发部" value="3"></el-option>
          <el-option label="综合管理部" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="dialogOpenEvent">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据列表 -->
    <el-table :data="hrData" stripe style="width: 100%">
      <el-table-column type="index" :index="indexNumber" label="编号" width="50" align="center"></el-table-column>
      <el-table-column prop="id" label="id" v-if="false" align="center"></el-table-column>
      <el-table-column prop="materialName" label="物料名称"  align="center"></el-table-column>
      <el-table-column prop="materialNumber" label="物料编号"  align="center"></el-table-column>
      <el-table-column prop="qac" label="质保文件" align="center"></el-table-column>
      <el-table-column prop="qacNumber" label="质保文件编号"  align="center"></el-table-column>
      <el-table-column prop="inputtingTime" label="建档时间"  align="center"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <template>
                <el-popconfirm  @confirm="deleteUser(scope.$index, scope.row)"
                                confirm-button-text='确定'
                                cancel-button-text='取消'
                                icon="el-icon-info"
                                icon-color="red"
                                title="你确定要删除吗?">
                  <el-button slot="reference" size="mini" type="danger">删除</el-button>
                </el-popconfirm>
              </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next"
                   @current-change="getpageData"
                   @prev-click="getpageData"
                   @next-click="getpageData"
                   @size-change="getpageData"
                   :current-page.sync="pageparm.currPage"
                   :page-size.sync="pageparm.pageSize"
                   :total="pageparm.total">
    </el-pagination>

    <!-- 添加/编辑 -->
    <el-dialog :append-to-body="true" :title="dialogObj.dialogtitle" :visible.sync="dialogObj.dialogShow">
      <el-form :model="editForm" label-width="120px" style="margin-right: 20px" :rules="formrules">
        <el-form-item label="物料名称">
          <el-input v-model="editForm.materialName"></el-input>
        </el-form-item>
        <el-form-item label="物料编号" prop="materialNumber">
          <el-input v-model.number="editForm.materialNumber"></el-input>
        </el-form-item>
        <el-form-item label="物料供应商">
          <el-select v-model="testid">
            <el-option label="生产部" value="1"></el-option>
            <el-option label="质量部" value="2"></el-option>
            <el-option label="研发部" value="3"></el-option>
            <el-option label="综合管理部" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="质保证书编号">
          <el-input v-model.number="editForm.qacNumber"></el-input>
        </el-form-item>
        <el-form-item label="质保证书上传">
          <el-button size="small" type="primary">文件上传</el-button>
        </el-form-item>
        <el-form-item align="center">
          <el-button type="primary" size="small">{{ dialogObj.dialogBtnValue }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "materialpage",
  data() {
    return {
      visable:false,
      testid:'',
      material: {
        materialNumber:'',   // 物料编号
        materialName:'',  // 物料名称
      },
      hrData: [],
      //搜索处的数据
      userSelect: [],
      loading: false, //是显示加载
      title: '添加员工',
      editFormVisible: false, //控制编辑页面显示与隐藏
      dataAccessshow: false, //控制数据权限显示与隐藏
      unitAccessshow: false, //控制所属单位隐藏与显示
      isAdmin: localStorage.getItem("isAdmin"),
      hr: {
        name: "",
        workNumber: "",
        phoneNumber: "",
        gender: "",
        educationBackground: "",
        entryTime: "",
        age: "",
        department: "",
        position: "",
        state: ""

      },
      pageparm: {
        currPage: 1,
        pageSize: 3,
        total: 0,
      },
      // 请求数据参数
      formInline: {
        page: 1,
        limit: 10,
        name: "",
        workNumber: "",
        phoneNumber: "",
        department: "",
      },
      // 编辑与添加
      editForm: {
        id: 0,
        materialNumber: '',//质保证书编号
        materialName: "",//物料名称
        supplierInfoId: null, //物料供应商id  外键
        qacNumber: "", //质保证书编号
        qac: "",
        inputtingTime: "",
        productInWarehouseApplicationList: null,
        purchaseList: null
      },
      //dialog 属性
      dialogObj:{
        dialogShow:false,
        dialogtitle:"",
        dialogBtnValue:"",
      },
      //表单rules认证
      formrules:{
        materialNumber:[
            { required: true, message: '请输入物料编号', trigger: 'blur' },
            { type: 'number', message: '请输入数字', trigger: 'blur' },
        ],
      }
    }
  },
  methods: {
    // 获取数据方法
    getdata(parameter) {
      this.loading = true
      // 获取员工列表
      this.getpageData()
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      console.log(row)
      this.editForm = row
      this.dialogObj.dialogtitle="物料编辑"
      this.dialogObj.dialogShow=true
      this.dialogObj.dialogBtnValue="修改"
    },
    //搜索事件
    search() {
      this.getpageData()
    },
    // 编辑、添加提交方法
    submitForm(editForm) {
      if (editForm.id != null && editForm.id != 'undefined') {
        this.$http.post("/manpower/update", editForm).then(r => {
          console.log(r)
          if (r.data.code == 200) {
            alert("修改成功")
          } else {
            alert("修改失败")
          }
        })
      } else {
        this.$http.post("/manpower/add", editForm).then(r => {
          console.log(r)
          if (r.data.code == 200) {
            alert("添加成功")
          } else {
            alert("添加失败")
          }
        })
      }
    },
    // 关闭编辑、增加弹出框
    closeDialog(dialog) {
      if (dialog == 'edit') {
        this.editFormVisible = false
      } else if (dialog == 'perm') {
        this.dataAccessshow = false
      } else if (dialog == 'unit') {
        this.unitAccessshow = false
      }
    },
    // 删除员工
    deleteUser(index, row) {
      console.log(row);
      this.$message.warning("删除失败!")

    },
    //分页
    getpageData(){
      this.$http.post("/procure/material/query", {
        material: this.material,
        currPage: this.pageparm.currPage,
        pageSize: this.pageparm.pageSize
      }).then(r => {
        console.log(r)
        if (r.data.code == 200) {
          this.hrData = r.data.data.data,
              this.pageparm.total = r.data.data.totalNums
              console.log(this.total)
        }
      })
    },
    // 表格条码
    indexNumber(index) {
      return (this.pageparm.currPage-1) * this.pageparm.pageSize + index + 1;
    },
    //dialog(物料添加打开)
    dialogOpenEvent(){
      this.dialogObj.dialogShow=true
      this.dialogObj.dialogtitle="物料添加"
      this.dialogObj.dialogBtnValue="添加"
    },
  },
  created: function () {
    this.getpageData()
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}

.userRole {
  width: 100%;
}
</style>